define(function(require,exports,module){
    'use strict';

    var React = require('react');
    var $ = require('jquery');
    var bootstrap = require('bootstrap');
    var language = require('datetimepickerLanguage');
    var datetimepicker = require('datetimepicker');
    var publicObj = require('lib/public');
    var token = publicObj.get_token();

    //调用AreaMutilDiagram组件
    var AreaMutilDiagram = require('components/diagram/AreaMutilDiagram');
	var ReactLoading = require('../../partial/ReactLoading');


    module.exports = React.createClass({displayName: "exports",
        loadData:function(start_date,end_date){
            if(start_date && end_date){

                this.setState({'start_date':start_date});
                this.setState({'end_date':end_date});
                this.setState({'data':{'ios':[],'android':[],'all':[]}});

                var tmp = {'ios':[],'android':[],'all':[]};
                var url = this.props.url;
                var sql_arr = [];
				
				
				
                var all_sql = "SELECT count(*) as value,\
                                FROM_UNIXTIME(left(ctime,10), '%Y-%m-%d') as name\
                                FROM qeeniao.record\
                                where left(ctime,10) > UNIX_TIMESTAMP('"+start_date+" 00:00:00')\
                                and left(ctime,10) <= UNIX_TIMESTAMP('"+end_date+" 23:23:59')\
                                group by name\
                                order by name ASC";

                sql_arr.push({'name':'all','sql':all_sql});

                sql_arr.forEach(function(v,k){
                    $.ajax({
                        url:url,
                        data:{sql:v.sql,'access_token':token},
                        type:'post',
                        dataType:'json',
                        success:function(o){
                            tmp = this.state.data;
                            tmp[v.name] = o;
                            if(this.isMounted()) {
                                this.setState({'data': tmp});
                            }
                        }.bind(this),
                        error:function(xhr,status,err){
                            console.error(v.sql,status,err.toString());
                        }
                    });
                    this.setState({'data':tmp});
                }.bind(this));
            }
        },
        handleSubmit:function(e){
            var start_date = React.findDOMNode(this.refs.from_date).value.trim();
            var end_date = React.findDOMNode(this.refs.to_date).value.trim();
			this.setState({'start':true});
            this.loadData(start_date,end_date);
        },
        componentDidMount:function(){
            $('#user_record_from_date').datetimepicker({
                language:'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2
            }).on('changeDate',function(ev){
                $('#user_record_to_date').datetimepicker('setStartDate',ev.date);
            }).on('outOfRange',function(){

            });

            $('#user_record_to_date').datetimepicker({
                language:'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2
            }).on('changeDate',function(ev){
                $('#user_record_from_date').datetimepicker('setEndDate',ev.date);
            }).on('outOfRange',function(){

            });
        },
        getInitialState:function(){
            return {
                'data':{'ios':[],'android':[],'all':[]},
                'start_date':'',
                'end_date':'',
				'start':false
            };
        },
        render:function(){
            var diagram;
            if(this.state.data.all.length > 0){
                var data = [];
                data.push({'name':'总量','data':this.state.data.all});
                diagram = React.createElement(AreaMutilDiagram, {className: "", id: "MoreUserRecordMuliti", id_name: "MoreUserRecordMuliti", y: "记账次数", title: "每日记账次数", data: data})
            }else{
				if(this.state.start){
					diagram = React.createElement(ReactLoading, {type: "spinning-bubbles", color: "#e3e3e3"})
				}
            }

            return (
                React.createElement("div", {className: "modal fade", id: this.props.id, tabindex: "-1", role: "dialog", "aria-labelledby": "myModalLabel", "aria-hidden": "true"}, 
                    React.createElement("div", {className: "modal-dialog"}, 
                        React.createElement("div", {className: "modal-content"}, 
                            React.createElement("div", {className: "modal-header"}, 
                                React.createElement("button", {type: "button", className: "close", "data-dismiss": "modal", "aria-label": "Close"}, React.createElement("span", {"aria-hidden": "true"}, "×")), 
                                React.createElement("h4", {className: "modal-title", id: "myModalLabel"}, "更多图表")
                            ), 

                            React.createElement("div", {className: "modal-body"}, 
                                React.createElement("div", {className: "container"}, 
                                    React.createElement("form", {className: "form-inline", id: "dateForm", onSubmit: this.handleSubmit}, 
                                        React.createElement("div", {className: "row"}, 
                                            React.createElement("div", {className: "form-group"}, 
                                                React.createElement("label", {htmlFor: "from_date"}, "选择日期："), 
                                                React.createElement("input", {className: "form-control", size: "16", type: "text", value: this.state.start_date, id: "user_record_from_date", ref: "from_date", readOnly: "true", "data-date": this.state.start_date, "data-date-format": "yyyy-mm-dd"})
                                            ), 

                                            React.createElement("div", {className: "form-group"}, 
                                                React.createElement("label", {htmlFor: "to_date"}, " - "), 
                                                React.createElement("input", {className: "form-control", size: "16", type: "text", value: this.state.end_date, id: "user_record_to_date", ref: "to_date", readOnly: "true", "data-date": this.state.start_date, "data-date-format": "yyyy-mm-dd"})
                                            ), 

                                            React.createElement("button", {type: "submit", style: {marginLeft:'10px'}, className: "btn btn-default btn-primary"}, "提交")
                                        )
                                    )
                                )
                            ), 

                            React.createElement("div", {className: "modal-body"}, 
                                React.createElement("div", {className: "row"}, 
                                    diagram
                                )
                            ), 

                            React.createElement("div", {className: "modal-footer"}, 
                                React.createElement("button", {type: "button", className: "btn btn-default", "data-dismiss": "modal"}, "退出")
                            )
                        )
                    )
                )
            );
        }
    });

});